Hace unos días hablaba sobre Lytebox, los problemas con los scripts y su respectivo alojamiento me hicieron crear una nueva entrada para añadir los archivos a la plantilla.
Ocurre como con todo, cuando empezamos cualquier cosa nos parece un rascacielos, poco a poco no lo vemos tan alto y el rascacielos pasa a ser un adosado. Ahí es cuando pensamos que si conseguimos escalar unos cuantos pisos también podemos subir unos escalones y nos animaos a rizar el rizo.

Me preguntaba Priamo la forma de añadir una lupa a las imágenes que mostramos en la ventana modal de Lytebox con la idea de informar que puede ser ampliada.

Imagino que habrá varias formas de conseguirlo pero voy a explicarlo de dos. Con la lupa al pasar el cursor sobre la imagen y situando la lupa fuera de la imagen.



Si queremos que al pasar el cursor muestre una imagen en este caso una lupa lo primero que haremos será añadir unos estilos a la plantilla.
Nos situamos antes de ]]></b:skin> y añadimos:

#lupa {
text-align: center;
}
#lupa a img {
cursor: url("url-imagen-lupa"), pointer;
margin: 3px 3px 0 3px;
}

La imagen procuraremos que tenga fondo transparente, a ser posible en formato png. En Google si escribimos "lupa" y vamos a la pestaña "imágenes" encontraremos varias y en diferentes tamaños.
Una vez tenemos los estilos con la imagen lo que haremos será añadir el código de Lytebox en el editor de entradas.

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

Añadimos unos estilos al mismo código para escoger el tamaño de la miniatura sin necesidad de retocar la imagen.

<a href="Url-de-la-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>

Para mostrar la lupa añadimos lo marcado en color verde.

<div id="lupa">
<a href="Url-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>
</div>

Y centramos la imagen (color naranja)

<center> <div id="lupa">
<a href="Url-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>
</div> </center>

J.Miur proporcionaba una idea estupenda para añadir estilos a los vídeos y partiendo de esa idea vamos a darle un poco más de vidilla a las imágenes.

A los estilos que añadimos anteriormente añadimos borde, fondo y redondeamos las esquinas.

#lupa {
text-align: center;
}
#lupa a img {cursor: url("url-imagen"), pointer;
-moz-border-radius: 8px;
background-color: #ccc;
border: 1px solid #2e2e2e;
margin: 3px 3px 0 3px;
}

También podemos añadir efecto hover.

#lupa a img:hover {
background:#DDDDDD none repeat scroll 0 0;
border:1px solid #D2D2D2;
}


Si lo que tratamos de añadir es un grupo de imágenes optaríamos por añadir un código a continuación de otro dejando un espacio entre las imágenes y respetando la etiqueta center.




<center><div id="lupa"><a href="url-imagen" rel="lytebox" title="Ampliar"><img style="width: 150px; height: 100px;" src="url-imagen" /></a> <a href="url-imagen" rel="lytebox" title="Ampliar"><img style="width: 150px; height: 100px;" src="url-imagen" /></a>
</div></center>

En url-imagen añadimos la url de la imagen, da igual si la imagen es grande para la miniatura porque ya escogemos el tamaño para mostrarla con width y height.

Añadir la lupa fuera de la imagen es otra historia.. necesitamos crear tablas para que cada tabla acoja en su interior las dos imágenes, miniatura y lupa y alteramos el orden del código de forma que la miniatura se muestra como una imagen y el enlace para ampliar la imagen se lo añadimos a la lupa.

<center>
<img src="url-imagen" style="height: 83px; width: 110px;" /></center><center><a href="url-imagen" rel="lytebox" title="Ampliar"><img src="url-imagen-lupa" style="margin-top: 5px;" /></a>
</center>



Creamos la tabla.

<center><table border="0"><tbody><tr>
<td><center>Contenido1</center>
</td>
<td><center>Contenido2</center>
</td>
<td><center>Contenido3</center>
</td>
</tr></tbody></table></center>


En Contenido1-2-3- incluimos el código que corresponda para mostrar la imagen, si deseamos más imágenes añadimos tantas líneas como imágenes vamos a añadir.







También podemos añadir estilos al igual que con las imágenes individuales pero los tendríamos que añadir a la imagen y en el código de la tabla en lugar del enlace, de lo contrario los estilos se añaden también a la lupa.
Sería algo así:

<img src="url-imagen" style="height: 83px; width: 110px;-moz-border-radius: 8px;background-color: #ccc; border: 1px solid #2e2e2e;" /><a href="url-imagen" rel="lytebox" title="Ampliar"><img src="url-imagen-lupa" style="margin-top: 5px;" /></a>









"La lupa sobre la imagen y el efecto de esquinas redondeadas no se visualiza con Explorer, en su lugar veremos el cursor de la "mano" y líneas rectas"




Dra. Irasema

Super truco, yo tengo un blog de fotosgrafia y me va a ser muy util, gracias Gema, eres genial.

Responder
Marisabel

Gema, despues de un tiempo sin poder mirar a fondo el blog, he vuelto a ver cosas para modificarlo.
Una pregunta,que seguro debe ser tonta.
Podría descargar solo el icono de la lupa de algun sitio? es que en todos has de descargar todo un cupo y no hay manera de que me aclare.
Gracias guapa.

Responder
Anónimo

buen blog
te felicito es uno de los mejores

Responder
Henry

Hola gema una pregunta, si instalo el lytebox dentro de la plantilla, no causa problemas con las librerias jquery.

Las librerias jquery que instale son las que estan precargadas en el cache de google.

Responder
Jose

Hola Gem@ !
Puede que no sea aquí donde deba escribirte este mensaje, pero bueno, sólo quería agradecerte profundamente el que hayas colocado mi blog como blog de la semana. Estoy muy contento de que tanta gente de golpe pueda echarle un vistazo a mi trabajo en estos seis meses. Ahora en verano, igual que los niños, este blog se tomará unas minivacaciones para ir preparando nuevo material para el curso que viene, así que seguiré ahí sin prisas, pero con las pausas que hagan falta.
Mil gracias otra vez, Gem@. Estoy muy contento, de verdad.
Un besazo.

Responder
Gem@

yz Saludos Dra Irasema me alegra que así sea :)

yz marisabel accede a Google y escribe "lupa" luego ve a la pestaña de imágenes y allí verás distintos tamaños y formatos de lupas :)

yz Muchas gracias Anónimo :)

Hola Henry sería cuestión de probar :O no todas las librerías crear conflictos entre sí.
Puedes añadir el script en un gadget de html si crea incompatibilidades eso no lo evita pero te resultará más fácil eliminar el script ;)

yz Hola Jose no tienes que darme las gracias.
Espero que disfrutes estas vacaciones y regreses con toda la ilusión del mundo :)

Responder
Peliculas y TV

Gema otra vez yo por aqui, mira acabe de cambiar de plantilla y estoy renovando, estoy viendo la letra demasiado grande como puedo cambiar la fuente de la letra.

Responder
Peliculas y TV

Gema porfavor lee mi comentario

Responder
Bocha

Gema, como hago para poner los iconos que tienes tu en los comentarios, las caritas, como hago?

Responder
Priamo

A ver dos problemas:
En el blog de pruebas verás 2 entradas"LUPITA" y "ENTRADA DEFINITIVA" en ambas la lupa sigue a la derecha de la imagen y no debajo de ella.

En el caso de "ENTRADA...." además queda un margen arriba de ellas que no entiendo porque se produce

Espero tu ayuda,gracias

Responder
Gem@

yz Peliculas y TV en la opción fuentes y colores de la plantilla de diseño puedes cambiarla, si no estuviera esa opción disponible mira en plantilla Edición de HTML el tamaño de letra lo tienes definido en varios sitios, busca:
font-size: 10pt;
font-size:9pt;
font-size: 14pt;
font-size: 23pt;

Ve mirando en vista previa para ver el resultado del cambio.

yz Loco 21 so los emoticones en los comentarios que ofrecía Vagabundia, puedes verlo aquí:
http://vagabundia.blogspot.com/2007/08/blogger-y-los-emoticones.html

yz Priamo copia y pega este código, ha sido un error mío :(

<center><img src="http://9hnh7q.blu.livefilestore.com/y1pQXZ2IyoBTiqwFfGJhbwUfIBBXDznpC75H6VM_Bi2j2qWTr4rd6FWuMdxge3koBU-WSLC8uAcV4gjNxjX7riyFmKBK6XIyhyF/DSC02944px7.JPG" style="height: 83px; width: 110px;" /></center><center><a href="http://9hnh7q.blu.livefilestore.com/y1pQXZ2IyoBTiqwFfGJhbwUfIBBXDznpC75H6VM_Bi2j2qWTr4rd6FWuMdxge3koBU-WSLC8uAcV4gjNxjX7riyFmKBK6XIyhyF/DSC02944px7.JPG" rel="lytebox" title="Ampliar"><img src="http://2.bp.blogspot.com/_q4j3j-JA2ro/SjQ2Pdf-ueI/AAAAAAAALIM/jYQXjjgsRwY/s200/priamolupa.png" style="margin-top: 5px;" /></a>
</center>

Para que no quede ese espacio superior intenta que la primera parte del código (en negrita) quede en una misma línea:
<center><table border="0"><tbody><tr>
<td><center><img src="http://3.bp.blogspot.com/_q4j3j-JA2ro/SjQ7Ow19rhI/AAAAAAAALIk/l6nNApRoh4s/s400/1015010488_thumb.jpg" style="height: 83px; width: 110px;" /></center><center><a href="http://3.bp.blogspot.com/_q4j3j-JA2ro/SjQ4anoKTCI/AAAAAAAALIc/NX8KT9Xl11w/s0/631910888.jpg" rel="lytebox" title="Ampliar"><img src="http://2.bp.blogspot.com/_q4j3j-JA2ro/SjQ2Pdf-ueI/AAAAAAAALIM/jYQXjjgsRwY/s200/priamolupa.png" style="margin-top: 5px;" /></a>
</center>
</td>
</tr></tbody></table></center>

Responder
Antonio Ruiz

Hola Gema.

Muchas gracias por este post. He mejorado el diseño de varias entradas donde debido al elevado número de fotografías insertadas, se hacía demasiado largo. Lo único que me da rabia es que no he conseguido el slide. No me aparece las imágenes una al lado de otra, sino las palabras "imagen 1 imagen 2 imagen 3".

Muchas gracias.
http://naturalezayviajes.blogspot.com

Responder
Priamo

Voy avanzando pero tengo 3 preguntas:
1.- Al poner la entrada"Nueva para Gema" tal cual la ves(estoy trabajando con esta entrada porque quiero que sea la definitiva) todo el blog con texto (tanto en la barra de entradas como en la barra sidebar) se ha quedado centrado .¿Que puede haber pasado,me puedes ayudar a restablecerlo?
2.-Sigo sin poder quitar el espacio en blanco entre el titulo y las fotos.
3.-No sé como pero si ves la entrada "Entrada Definitiva" verás que no aparece la "fecha de la entrada". No sé como ha desaparecido pero me interesa que desaparezca de mi entrada: "Nueva para Gema" como lo hago?
Muchisimas gracias

Responder
Anónimo

Me gusta esto de la lupa pero en algunos sitios he visto que solo con pinchar la imagen ella se amplia,o poner debajo de la foto ampliar imagen, le das y ya tienes la imagen ampliada.

¿como es eso?

Responder
Anónimo

Esoy cogiendote gustillo y no se hasta que punto será bueno. Tu blog hace mucho que le conozco aunque solo le habia visto así por encima.

Responder
Bocha

Una pregunta: Que hay que editar para lograr distanciar un poco un post de otro post. ??

Responder
Gem@

yz Antonio Ruiz ¿te refieres al slide de Lytebox o al grupo de imágenes de esta entrada?
Deja el ejemplo puesto que pueda verlo ;)

yz Priamo creo que se centra porque en body tienes establecido para que se centre el texto:
body {
background:#660000;
margin:0;
color:#ffffff;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
En lugar de center añade left.

yz Unhidalgo esto que ves es sólo un ejemplo de la forma de añadir una imagen o lupa, lo que dices es la forma original de ampliar las imágenes con Lytebox.
(Al principio de la entrada hay un enlace que te lleva a ejemplos como el que comentas.
Siempre digo que el html entra poquito a poco hasta que enamora, con el blog ocurre lo mismo :)

yz Loco21 si añades en post-footer añadimos margin-bottom:25px; (es un ejemplo) conseguimos que entre una entrada y otra quede más espacio o menos según la diferencia :)

Responder
Priamo

No es body,creo, donde está el problema.lo he probado y sigue igual. Para mi es la estructura de la entrada:algo de allí sobra o falta para que lo centre todo. Lodigo porqye he copiado la entrada en otro blog de pruebas y al pegar y ver el resultado: todo estaba igualmente centrado. A ver si puedes decirme otra cosa.
Supongo que de las otras 2 preguntas de mi post anterior sigues trabajandolas.Gracias

Responder
Gem@

yz Priamo ese centrado se ve con Explorer con Firefox no se visualiza por eso no lo veía.
Tienes que comprobar si dejando esas entradas en borrador continúa ese centrado.
Me extraña que el motivo sea al añadir la entrada porque los cambios que hacemos en las entradas no afectan los estilos de la plantilla a no ser que se añada una imagen muy grande que desplazaría la sidebar, pero no es el caso porque el tamaño de las miniaturas lo ajustamos en la misma entrada.
Si aún dejando las entradas en borrador el centrado continúa mira que cambios hiciste aparte de editar esa entrada porque de eso se trata.
El tema del espacio te lo contesté más arriba, te decía que para que no quede ese espacio intenta que la primera parte del código (en negrita) quede en una misma línea y te añadí una nueva forma de añadir la tabla suprimiendo cellspacing=20

Como verás en mi ejemplo hay un espacio que genera la tabla pero no tanto como el que queda en la tuya, intenta eso que te explico más arriba y vemos el resultado.

Responder
Antonio Ruiz

Hola Gema!

Acabo de volver a intentarlo y no lo consigo. Fíjate, arriba de las fotos individuales (que pueden ampliarse de una en una cuando hago click sobre ella) hay un texto que dice: texto o imagen 1texto o imagen 2texto o imagen 3. Cuando hago click en este texto es cuando se ven ampliadas.

La idea es que todas las imágenes individualizadas que ahora se ven, salgan en un Slide, ya que si las dejo como están ahora se han de ver haciendo click encima de cada una de ellas.

Otra pregunta, para que en vez de aparecer en el Slide "play" o "pause", si lo que quiero es que ponga "next", para agilizar la presentación al gusto del visitante, cómo se podría hacer?

Este es el enlace del post: http://naturalezayviajes.blogspot.com/2009/01/de-naturaleza-y-viajes.html

Y este el código que introduje con la url de tres fotos (la idea es meterlas todas en Slide): texto o imagen 1texto o imagen 2texto o imagen 3

Mil gracias.

Responder
Antonio Ruiz

Vaya! Ha salido directamente el resultado del código. Te mando el código en un correo.

Gracias nuevamente.

Responder
Jessica

@Gema,

Gracias! Esto precisamente era lo que me hacía falta!! Y lo explicaste tan sencillo! Gracias!

Mira como me quedó en mi blog. Te gusta?

--Jessica

Responder
Nathan yo

ESO NO ME FUNCIONA PONGO UNA FOTO Y SI APARECE LA LUPA PERO SE ABRE EN UNA NUEVA PAGINA
Y ESA NO ES LA IDEA

Responder
Gem@

yz Fantástico Jessica :)

yz Global Metion Blog ¿seguiste los pasos para añadir Lytebox )

Responder
GMB

si agregar ese código antes de la parte de CSS del blog "skin", luego poner la lupa en el editor de entrada poner ese allí cono indicas y la foto sale toda chiquita aparece la lupa pero no funciona normalmente

Responder
Gem@

yz Antonio Ruiz hay varios errores en el código del grupo de imágenes, la url de algunas imágenes que son las ampliaciones están rotas. Las de las miniaturas van bien y como es la misma url puedes solucionarlo fácilmente y copiarlas.
Otro error es que para mostrar un Slideshow hay que añadir un nombre al grupo de imágenes en el siguiente ejemplo sería "gema" rel="lyteshow[gema]" al tratarse de un mismo grupo debes añadir el mismo nombre. En tu código dice rel="lytebox" eso es para mostrar una imagen individual.
Dice en algo así:
"Crear un Slideshow añadiendo la etiqueta rel="lyteshow[gema]"
(Sustituir gema por el nombre adjudicado al grupo de imágenes) ejemplo: viajes, vacaciones..."

La imagen "next" hay que añadirla a los estilos igual que añadimos "play" o el resto de imágenes. (Hay un archivo donde he añadido todas las imágenes para evitar el trabajo de alojarlas) lo verás donde dice...
"Como entiendo que puede parecer confuso incluir las imágenes quise aligerar un poco el trabajo, añadí las imágenes en color gris (grey) y eliminé código que no era necesario. El resultado lo podéis copiar de este archivo de texto ..."

¡Suerte!!

Responder
Gem@

yz GMB para obtener el resultado de ver la imagen ampliada en ventana modal es necesario que antes tengamos añadido algún script, en este caso hablamos de Lytebox pero puede ser cualquier otro.
Necesito ver en qué entrada tienes añadido ese ejemplo que me dices he accedido a tu blog y no lo veo ¿me dejas una url de la entrada donde lo tienes?

Responder
Nathan yo

Gem Yo soy GMB esta es una entrada no sé que hice mla :S http://globalmention.blogspot.com/2009/06/miley-nick.html#comments

Responder
Gem@

yz Aparentemente todo está bien Global Metion Blog, he probado con el mismo código que tienes añadido ahora mismo y en mi blog funciona correctamente.
Los estilos y el script también están correctos, puedes intentar a añadir el script en la plantilla pero antes haz una copia de respaldo o mejor aún puedes probar en otro blog con la misma plantilla que tienes ahora (la descargas y la añades al blog de pruebas)
Ya sabes que al añadir el script en la plantilla hay una pequeña diferencia por eso añadí dos archivos distintos, para la plantilla es necesario incluir lo marcado en negrita.
<script type='text/javascript'>
// <![CDATA[
aquí es script
---------
---------
// ]]>
</script>

Si prefieres probar en el mismo blog que ahora lo tienes asegúrate como te decía al principio de tener una copia de la plantilla.
Ya me dices algo :)

Responder
Vku

hola yo en mi blog utilizo un metodo que me resulta facil y se ve en todos los exploradores mientras sea un cursor le pongo asi a la imagen que se muestra
<img style="cursor: url(http://sitioalojado/pluscur.cur), pointer; visibility: visible;" src='http://sitioalojada/thumb.jpg' alt="el titulo"border='0'/>
espero les sea de utilidad si quieren pasen y vean como queda http://loseasi.blogspot.com/

Responder
Gem@

yz Gracias Vku, se ve en todos los navegadores porque la imagen se trata de un archivo cur si fuera una imagen no se visualizaría en Explorer.
La idea está muy bien, se añade el cursor a la imagen. Añadiéndolo en los estilos evitamos tener que copiar cada vez la imagen del cursor aunque es necesario envolver la imagen con un div o con la etiqueta span :)

Responder
Antonio Ruiz

Hola Gema,

Mil gracias por las respuestas. Al fin funciona! Finalmente sólo he reemplazado los lytebox de cada foto, por lyteshow cada vez que aparecía y ya funciona prefectamente.

Saludos,

http://naturalezayviajes.blogspot.com

Responder
Gem@

yz Genial Antonio Ruiz aunque yo pensaba que ya estaba lyteshow en las imágenes al menos en el código que me mandaste :O

Responder
Priamo

Hola de nuevo, por fin me he decidido por confeccionar una Tabla.
Me falta un pequeño detalle que no logro averiguar y que es: Me gustaria que al poner el puntero del raton sobre la imagen en miniatura, éste mostrara una mano que al tiempo mostrase por ejemplo un texto. Es decir como ocurre al poner el raton sobre la lupa que dice "Ampliar".
Parece sencillo pero no lo logro hacer.
Si accedes a mi blog de pruebas veras ejemplos la entrada (con tabla) se llama "Segunda prova".
Gracias

Responder
Gem@

yz Priamo para que salga una mano simplemente debes omitir todos los pasos de la lupa ya que al ser un enlace la mano sale por defecto, el texto al pasar el cursor sale cuando añadimos en el enlace title ;)

a href="url-imagen" rel="lytebox" title="texto a mostrar"

Responder
Play

Hola Gem@ como le hago para agregar una lupa pero que se vea tanto en IE como el Firefox, por que las imagenes no se ven en IE, quiero poner esa lupa que es como un cursor. Saludos

Responder
Gem@

yz cargohe Explorer sólo soporta archivos CUR o ANI :(
Te recomiendo leer esta entrada que te sacará de dudas:
http://vagabundia.blogspot.com/2007/07/css-los-cursores.html

Responder
Admin

HOLA MUY LINDO EL BLOG...
ME PODES DAR EL CODIGO COMPLETO DE LA PRIMER IMAGEN CON LUPA,QUE CUANDO LE HACES CLICK SALE UNA VENTANA CON LA IMAGEN,ESPERO RESPUESTA SALUDOS!!

Responder
Gem@

:: Lo que muestra esa imagen ampliada no es un código sino una librería y es una ventana modal que se llama Lytebox qu eno queda igual qu ela vez una vez añadida porque yo la tengo personalizada.
Algo parecido puedes verlo en la siguiente url:
http://gemablog-.blogspot.com/2010/10/shadowbox-elegante-y-completa-ventana.html

Responder
del batitú

Hola Gem@, aquí estoy otra vez ;) recuerdas que me sugeriste que usara este post para agregar un nombre a las imágenes de la galería con css? pues no lo logro, la palabra me queda al lado a la derecha y no debajo de la imagen!!! socorro!! :O

Responder
Gem@

:: del batitú tendría que ver ese ejemplo y no recuerdo la url del sitio :(

Responder
del batitú

jajaj, es muy fácil Gem@, hace días que estoy con esto http://gemablog-.blogspot.com/2010/08/galeria-de-imagenes-con-css.html :S

Responder
Gem@

:: del batitú como lo que quieres es añadir un texto por eso te decía que el texto debía sustituir la imagen de la lupa, para hacerlo con una imagen sería por ejemplo:

<center><table border="0"><tbody><tr>
<td><center>
<img src="http://1.bp.blogspot.com/-JiDqgUAHud0/TWqObQ3b8QI/AAAAAAAAA-M/Xn6fzxl5LB8/s220/foto-carn%25C3%25A9.jpg" style="height: 70px; width: 70px;"/>
<a href="url-del-sitio" title="">título</a>
</center>
</td>
</tr></tbody></table></center>

Si es para un grupo:

<center><table border="0"><tbody><tr>
<td><center>
<img src="url-imagen" style="height: 70px; width: 70px;"/>
<a href="url-del-sitio" title="">título</a>
</center>
</td>
<td><center>
<img src="url-imagen" style="height: 70px; width: 70px;"/>
<a href="url-del-sitio" title="">título</a>
</center>
</td>
<td><center>
<img src="url-imagen" style="height: 70px; width: 70px;"/>
<a href="url-del-sitio" title="">título</a>
</center>
</td>
</tr></tbody></table></center>

Cada vez que añades lo siguiente a la tabla estás añadiendo una imagen y su correspondiente texto.

<td><center>
<img src="url-imagen" style="height: 70px; width: 70px;"/>
<a href="url-del-sitio" title="">título</a>
</center>
</td>

Responder
del batitú

ayayay Gem@, cómo nos hacés pensar:) el problema era centrar la palabra debajo de la foto y lo logré agregando otra fila a la tabla,
tr>td>center></centertítulo</td</tr (saqué las llaves para poder publicar el comentario)
qué haríamos sin tí. que pases buenas pascuas :P

Responder
Gem@

:: A mi me salía centrado el texto tal y como te puse porque está dentro de la tabla y con la etiqueta center :)
Que lo pases bien también ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top